<!--
 * @Author: 孙文豪
 * @Description: 登录页面
 * @Date: 2024-03-04 14:53:07
 * @LastEditTime: 2024-03-06 09:41:13
 * @LastEditors: 孙文豪
-->
<template>
  <div class="login-page">
    <div class="web-title">
      <p class="title-ch">全流程留学服务管理系统</p>
      <p class="title-en">
        Full process study abroad service management system
      </p>
    </div>

    <div class="login-region">
      <div class="account" :class="{ rotate }" v-if="loginType">
        <div class="login-top">
          <p class="login-text">登录</p>
          <p class="register">注册账号</p>
        </div>
        <div class="input-box">
          <input
            class="account-input"
            type="text"
            placeholder="请输入账号"
            v-model="accountNumber"
            @keydown.enter="loginFn"
          />
          <span class="iconfont icon-JXC-huiyuan"></span>
        </div>
        <div class="input-box">
          <input
            class="pass-input"
            type="password"
            placeholder="请输入密码"
            v-model="password"
            @keydown.enter="loginFn"
          />
          <span class="iconfont icon-JXC-mima"></span>
        </div>
        <el-checkbox v-model="checked">记住密码</el-checkbox>
        <div class="login-btn" @click="loginFn">登录</div>
        <p class="forgot-password">忘记密码</p>
      </div>
      <div class="wx-login-box" :class="{ rotate }"  v-if="!loginType">
        <img src="~@/assets/images/QRcode.jpg" class="wx-QRcode" />
        <p>微信扫码登录</p>
      </div>

      <!-- 微信登录 -->
      <img
        src="~@/assets/images/wx.png"
        v-if="loginType"
        @click="switchLogin(0)"
        class="wx-login"
      />
      <img
        src="~@/assets/images/account.png"
        v-if="!loginType"
        @click="switchLogin(1)"
        class="wx-login"
      />
    </div>
  </div>
</template>

<script>
import {} from 'module';
import { dataCenterApi } from '@/api/modules/common.api.js';
import { reactive, toRefs, onBeforeMount, onMounted } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import {accountList} from './login.js'
export default {
  name: '',

  setup() {
    const router = useRouter();
    const data = reactive({
      accountList,
      checked: false,
      loginType: 1,
      accountNumber: 'swh',
      password: '123',
      rotate: false
    });
    onBeforeMount(() => {});
    onMounted(() => {
      // 判断是否已登录
      setTimeout(() => {
        const LoginStatus = localStorage.getItem('LoginStatus');
        if (LoginStatus) {
          router.push({
            name: 'main'
          });
        }
      }, 1000);

      dataCenterApi().then((res) => {
        console.log(res);
      });
    });
    // 点击登录
    const loginFn = () => {
      if (accountList[data.accountNumber] == data.password ) {
        localStorage.setItem('LoginStatus', data.accountNumber);
        router.push({
          name: 'main'
        });
      } else {
        Message({
          type: 'error',
          content: '密码错误'
        });
      }
    };
    // 切换登录方式动画
    const switchLogin = (type) => {
      data.rotate = true;
      setTimeout(() => {
        data.loginType = type;
        data.rotate = false;
      }, 300);
    };
    return {
      switchLogin,
      loginFn,
      ...toRefs(data)
    };
  }
};
</script>
<style scoped lang="less">
.login-page {
  position: relative;
  height: 100%;
  width: 100%;
  overflow: hidden;
  overflow-y: auto;
  background-image: linear-gradient(
    to bottom right,
    #55beff,
    #009dff,
    #0066ff,
    #0048ff
  );

  .web-title {
    position: absolute;
    color: #fff;
    z-index: 999;
    width: 100%;
    left: 50%;
    top: 120px;
    transform: translate(-50%, -50%);
    text-align: center;
    .title-ch {
      font-size: 32px;
    }
    .title-en {
      margin-top: 5px;
      font-size: 14px;
      color: #ddd;
      font-style: italic;
    }
  }
  .login-region {
    position: absolute;
    z-index: 998;
    left: 50%;
    top: 200px;
    transform: translateX(-50%);
    height: 500px;
    padding: 30px;
    box-sizing: border-box;
    width: 400px;
    border-radius: 10px;
    background: #fff;

    .account {
      transition: 1s;
      background: #fff;
      &.rotate {
        transform: rotateY(180deg);
      }
      .login-top {
        margin-bottom: 10px;
        overflow: hidden;
        .login-text {
          float: left;
          font-size: 26px;
        }
        .register {
          line-height: 40px;
          float: right;
          color: @TSA;
          cursor: pointer;
          font-size: 14px;
          transition: 0.3s;
          &:hover {
            color: @TSH;
          }
        }
      }
      .input-box {
        position: relative;
        margin-top: 20px;
        .icon-JXC-huiyuan,
        .icon-JXC-mima {
          position: absolute;
          left: 10px;
          top: 11px;
          font-size: 18px;
          color: @HSA;
        }

        .account-input,
        .pass-input {
          width: 100%;
          height: 42px;
          padding: 0 15px 0 35px;
          border-radius: 4px;
          box-sizing: border-box;
          background: #fff;
          line-height: 42px;
          outline: none;
          border: 1px solid @HSC;

          &:focus {
            border: 1px solid @TSH;
          }
          &::-webkit-input-placeholder {
            color: @HSB;
          }
        }
        .pass-input {
          margin-bottom: 10px;
        }
      }

      .login-btn {
        width: 100%;
        height: 42px;
        text-align: center;
        line-height: 42px;
        background: @TSA;
        border-radius: 4px;
        color: #fff;
        margin-top: 10px;
        transition: 0.3s;
        font-size: 14px;
        cursor: pointer;
        &:hover {
          background: @TSH;
        }
      }
      .forgot-password {
        text-align: center;
        line-height: 40px;
        color: @TSA;
        cursor: pointer;
        font-size: 14px;
        transition: 0.3s;
        &:hover {
          color: @TSH;
        }
      }
    }

    .wx-login-box {
      transition: 1s;
      background: #fff;
      &.rotate {
        transform: rotateY(180deg);
      }
      .wx-QRcode {
        width: 80%;
        display: block;
        margin: 0 auto;
      }
      p {
        text-align: center;
        font-size: 22px;
        margin-top: 10px;
      }
    }
    .wx-login {
      width: 36px;
      position: absolute;
      bottom: 30px;
      transform: translateX(-50%);
      left: 50%;
      cursor: pointer;
      transition: 0.3s;
      opacity: 0.5;
      &:hover {
        opacity: 1;
      }
    }
  }
}
</style>
